<template>
	<view class="content">
		<!-- 顶栏 -->
		<uni-nav-bar class="vip-desc-nav-bar" @clickLeft="back">
			<block slot="left">
				<!-- 搜索按钮 -->
				<icon type="" @click="testReq" class="fontIcon icon-back"></icon>
			</block>
			<view>
				<text @click="testReq" class="top-nav-button top-nav-button-selected">VIP</text>
			</view>
			<view> 
				<text @click="testReq" class="top-nav-button">SVIP</text>
			</view>
		</uni-nav-bar>
		
		<!-- 信息容器 -->
		<view class="desc-info-content svip">
			<!-- vip卡 -->
			<view class="desc-card svip">
				<!-- 用户信息 -->
				<!-- 这块需要占位进行组件的复用 -->
			 <h-com-head></h-com-head>
				<!-- 进度 -->
				<view class="wrap-vip-exp-bar">
					<text class="now-level">V1</text>
					<view class="exp-bar-bg">
						<view class="exp-bar" style="width: 25%;">
							<view class="bar-scroll"></view>
						</view>
					</view>
					<text class="after-level">V2</text>
					<!-- 进度说明 -->
					<view class="exp-info">
						当前成长值5882点，差2118点升级
					</view>
				</view>
				<!-- 底栏 -->
				<view class="desc-card-bottom-bar">
					<text class="vip-title">SVIP1</text>
					<text class="end-time">2023-3-25 到期</text>
					<button class="common-btn btn-renewal">
						续费<icon type="" class="fontIcon icon-goto"/>
					</button>
				</view>
			</view>
			<image @click="" src="../../static/temp-vipAd.webp" mode="widthFix" class="full-img"></image>
			<!-- 标题 -->
			<view class="desc-info-title">等级和经验介绍</view>
			<!-- 内容-大卡片 -->
			<view class="desc-info-card larger">
				<view class="content">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/level-up.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">会员升级</view>
						<view class="info-content">
							VIP开通后，每天增加10经验。
							VIP1升级VIP2需要300经验，每升一级，升级所需经验比上一级多100经验。
							<br/>
							<text class="strong">
								*VIP用户在灰灰周边商城每消费1人民币可兑换1点经验。<br/>
							</text>
								（注：仅限灰灰独家周边）<br/>
							<text class="strong">
								*VIP最高等级为20级。
								*21级开始自动升级为金色SVIP.
							</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 标题 -->
			<view class="desc-info-title">成长和身份特权</view>
			<!-- 内容-大卡片 -->
			<view class="desc-info-card larger svip-type">
				<view class="content">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/sale.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">VIP折扣</view>
						<view class="info-content">
							所有VIP和SVIP用户在淘宝"灰灰有品周边小店"购买灰灰周边物品，可享受每样周边商品3件内折扣价购买，超过3件后恢复原价。
							PS:仅对灰灰有品独家周边产品生效，联名或其余品牌产品不享受折扣。
							购买后所获得的VIP经验和灰豆按照实际购买价格兑换。邮费不计。
							具体操作方式：在淘宝下单前，截取自己的VIP详情界面，发送至淘宝灰灰周边店铺客服即可。
						</view>
					</view>
				</view>
				<view class="info-bottom">
					具体折扣如下表：
					<view class="table-content">
						<table class="info-table vip">
							<tr>
								<th>VIP等级</th>
								<th>折扣(%)</th>
							</tr>
							<tr>
								<td>1~5</td>
								<td>98</td>
							</tr>
							<tr>
								<td>6~11</td>
								<td>96</td>
							</tr>
							<tr>
								<td>11~15</td>
								<td>94</td>
							</tr>
							<tr>
								<td>16~20</td>
								<td>9</td>
							</tr>
						</table>
						<table class="info-table svip">
							<tr>
								<th>SVIP等级</th>
								<th>折扣(%)</th>
							</tr>
							<tr>
								<td>1~5</td>
								<td>88</td>
							</tr>
							<tr>
								<td>6~10</td>
								<td>85</td>
							</tr>
							<tr>
								<td> </td>
								<td> </td>
							</tr>
							<tr>
								<td> </td>
								<td> </td>
							</tr>
						</table>
					</view>
				</view>
			</view>
			<!-- 内容-大卡片 -->
			<view class="desc-info-card larger">
				<view class="content">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/up-effect.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">灰灰等级加速</view>
						<view class="info-content">
							VIP账号升级加成：<br/>
							<text class="strong">
							(基数+系数*当前等级)，系数为2。<br/>
							</text>
							VIP用户积分获取比普通用户多（2*VIP等级）分。<br/>
							例如：VIP20用户，每次点赞可获得积分为5+（2*20）=45分。<br/>
						</view>
					</view>
				</view>
			</view>
			<!-- 卡片组容器 -->
			<view class="wrap-multiple-card">
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/name.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">红色昵称</view>
						<view class="info-content">千万人之中，用红色来写您的名字！</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/nameplate.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">身份铭牌</view>
						<view class="info-content">昵称后面跟有尊贵的红色身份铭牌，彰显会员尊贵身份</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/party.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">身份特权一</view>
						<view class="info-content">灰灰聚会活动优先报名参加且免费参加</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/appreciation.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">身份特权二</view>
						<view class="info-content">灰灰线下品鉴、比赛、参观活动优先参加。</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/activity.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-content">VIP专属线上活动，奖品更丰厚。</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/server.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-content">灰灰养茄小助手使用(开发中)</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/game.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-content">玩法丰富互动更多的会员专属小游戏</view>
					</view>
				</view>
			</view>
			<!-- 内容-大卡片 -->
			<view class="desc-info-card larger">
				<view class="content">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/beans.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">全新货币“灰豆加成奖励，兑换商城会员专属神秘好礼</view>
						<view class="info-content">
							*VIP用户每在灰灰周边商城消费1人民币可兑换3灰豆
							*普通用户每在灰灰周边商城消费1人民币可兑换1灰豆
						</view>
					</view>
				</view>
			</view>
			<!-- 内容-大卡片 -->
			<view class="desc-info-card larger">
				<view class="content">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/birthday.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">生日祝福</view>
						<view class="info-content">
							根据您在个人资料中设置的生日日期，每年生日当天可收到系统发送的<text class="strong">50000</text>积分。
						</view>
					</view>
				</view>
			</view>
			<!-- 标题 -->
			<view class="desc-info-title">装扮与个性内容</view>
			<!-- 卡片组容器 -->
			<view class="wrap-multiple-card">
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/friend-groups.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-content">加入灰灰VIP专属用户群。</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/edit-name.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">修改昵称</view>
						<view class="info-content">一年<text class="strong">5</text>次修改呢称</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/edit-post.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">编辑帖子</view>
						<view class="info-content">对已发布帖子进行，可编辑<text class="strong">5</text>次</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/gif-use.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">个性动图</view>
						<view class="info-content">会员可以在主页发送GIF动图 (大小≤3M)</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/gif-use.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">后悔药</view>
						<view class="info-content">可恢复自己24小时内删除的帖子</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 信息容器 -->
		<view class="desc-info-content svip">
			<!-- vip卡 -->
			<view class="desc-card svip">
				<!-- 用户信息 -->
				<Headltem></Headltem>
				<!-- 进度 -->
				<view class="wrap-vip-exp-bar">
					<text class="now-level">V1</text>
					<view class="exp-bar-bg">
						<view class="exp-bar" style="width: 25%;">
							<view class="bar-scroll"></view>
						</view>
					</view>
					<text class="after-level">V2</text>
					<!-- 进度说明 -->
					<view class="exp-info">
						当前成长值5882点，差2118点升级
					</view>
				</view>
				<!-- 底栏 -->
				<view class="desc-card-bottom-bar">
					<text class="vip-title">SVIP1</text>
					<text class="end-time">2023-3-25 到期</text>
					<button class="common-btn btn-renewal">
						续费<icon type="" class="fontIcon icon-goto"/>
					</button>
				</view>
			</view>
			<image @click="" src="../../static/temp-vipAd.webp" mode="widthFix" class="full-img"></image>
			<!-- 标题 -->
			<view class="desc-info-title">等级和经验介绍</view>
			<!-- 内容-大卡片 -->
			<view class="desc-info-card larger">
				<view class="content">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/level-up.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">会员升级</view>
						<view class="info-content">
							SVIP升级，每天增加10经验，SVIP1升级S VIP2需要27300经验，每升一级，升级所需经验比上一级多100经验。
							<br/>
							<text class="strong">
								SVIP最高等级为10级。<br/>
								*SVIP用户在灰灰周边商城每消费1人民币可兑换1点经验<br/>
							</text>
							(注：仅限灰灰独家周边)
						</view>
					</view>
				</view>
			</view>
			<!-- 标题 -->
			<view class="desc-info-title">成长和身份特权</view>
			<!-- 内容-大卡片 -->
			<view class="desc-info-card larger svip-type">
				<view class="content">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/sale.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">VIP折扣</view>
						<view class="info-content">
							所有VIP和SVIP用户在淘宝"灰灰有品周边小店"购买灰灰周边物品，可享受每样周边商品3件内折扣价购买，超过3件后恢复原价。
							PS:仅对灰灰有品独家周边产品生效，联名或其余品牌产品不享受折扣。
							购买后所获得的VIP经验和灰豆按照实际购买价格兑换。邮费不计。
							具体操作方式：在淘宝下单前，截取自己的VIP详情界面，发送至淘宝灰灰周边店铺客服即可。
						</view>
					</view>
				</view>
				<view class="info-bottom">
					具体折扣如下表：
					<view class="table-content">
						<table class="info-table vip">
							<tr>
								<th>VIP等级</th>
								<th>折扣(%)</th>
							</tr>
							<tr>
								<td>1~5</td>
								<td>98</td>
							</tr>
							<tr>
								<td>6~11</td>
								<td>96</td>
							</tr>
							<tr>
								<td>11~15</td>
								<td>94</td>
							</tr>
							<tr>
								<td>16~20</td>
								<td>9</td>
							</tr>
						</table>
						<table class="info-table svip">
							<tr>
								<th>SVIP等级</th>
								<th>折扣(%)</th>
							</tr>
							<tr>
								<td>1~5</td>
								<td>88</td>
							</tr>
							<tr>
								<td>6~10</td>
								<td>85</td>
							</tr>
							<tr>
								<td> </td>
								<td> </td>
							</tr>
							<tr>
								<td> </td>
								<td> </td>
							</tr>
						</table>
					</view>
				</view>
			</view>
			<!-- 内容-大卡片 -->
			<view class="desc-info-card larger">
				<view class="content">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/up-effect.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">灰灰等级加速</view>
						<view class="info-content">
							VIP账号升级加成：<br/>
							<text class="strong">
							(基数+系数*当前等级)，系数为2。<br/>
							</text>
							SVIP用户积分获取比普通用户多(2*(20＋S VIP等级)分。
							例如：SVIP10用户，每次点赞可获得积分为5+(2*30)=65分。
							SVIP加成等级计算会自动加上VIP的等级。
						</view>
					</view>
				</view>
			</view>
			<!-- 卡片组容器 -->
			<view class="wrap-multiple-card">
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/name.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">金色昵称</view>
						<view class="info-content">千万人之中，用金色来写您的名字！</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/nameplate.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">身份铭牌</view>
						<view class="info-content">昵称后面跟有尊贵的金色身份铭牌，彰显会员尊贵身份</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/party.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">身份特权一</view>
						<view class="info-content">灰灰聚会活动优先报名参加且免费参加</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/appreciation.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">身份特权二</view>
						<view class="info-content">灰灰线下品鉴、比赛、参观活动优先参加，并享有一定费用折扣。</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/activity.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-content">VIP专属线上活动，奖品更丰厚。</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/server.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-content">灰灰养茄小助手使用(开发中)</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/game.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-content">玩法丰富互动更多的会员专属小游戏</view>
					</view>
				</view>
			</view>
			<!-- 内容-大卡片 -->
			<view class="desc-info-card larger">
				<view class="content">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/beans.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">全新货币“灰豆加成奖励，兑换商城会员专属神秘好礼</view>
						<view class="info-content">
							*SVIP用户每在灰灰周边商城消费1人民币可兑换5灰豆
							*普通用户每在灰灰周边商城消费1人民币可兑换1灰豆
						</view>
					</view>
				</view>
			</view>
			<!-- 内容-大卡片 -->
			<view class="desc-info-card larger">
				<view class="content">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/birthday.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">生日祝福</view>
						<view class="info-content">
							根据您在个人资料中设置的生日日期，每年生日当天可收到系统发送的<text class="strong">50000</text>积分。
						</view>
					</view>
				</view>
			</view>
			<!-- 标题 -->
			<view class="desc-info-title">装扮与个性内容</view>
			<!-- 卡片组容器 -->
			<view class="wrap-multiple-card">
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/friend-groups.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-content">加入灰灰VIP专属用户群。</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/edit-name.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">修改昵称</view>
						<view class="info-content">一年 <text class="strong">5</text> 次修改呢称</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/edit-post.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">编辑帖子</view>
						<view class="info-content">对已发布帖子进行，可编辑<text class="strong">5</text>次</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/gif-use.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">个性动图</view>
						<view class="info-content">会员可以在主页发送GIF动图 (大小≤3M)</view>
					</view>
				</view>
				<!-- 内容-小卡片 -->
				<view class="desc-info-card">
					<view class="wrap-image">
						<image @click="" src="../../static/c_vip-desc-icon/gif-use.webp" mode="heightFix"></image>
					</view>
					<view class="wrap-info">
						<view class="info-name">后悔药</view>
						<view class="info-content">可恢复自己24小时内删除的帖子</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 说明表格 -->
			<view class="desc-info-content">
			<view class="table-content">
				<table class="info-table vip">
					<tr>
						<th colspan="4">VIP等级说明</th>
					</tr>
					<tr>
						<th>等级</th>
						<th>经验</th>
						<th>等级</th>
						<th>经验</th>
					</tr>
					<tr>
						<td>VIP1</td>
						<td>0</td>
						<td>VIP11</td>
						<td>7500</td>
					</tr>
					<tr>
						<td>VIP2</td>
						<td>300</td>
						<td>VIP12</td>
						<td>8800</td>
					</tr>
					<tr>
						<td>VIP3</td>
						<td>700</td>
						<td>VIP13</td>
						<td>10200</td>
					</tr>
					<tr>
						<td>VIP4</td>
						<td>1200</td>
						<td>VIP14</td>
						<td>11700</td>
					</tr>
					<tr>
						<td>VIP5</td>
						<td>1800</td>
						<td>VIP15</td>
						<td>13300</td>
					</tr>
					<tr>
						<td>VIP6</td>
						<td>2500</td>
						<td>VIP16</td>
						<td>15000</td>
					</tr>
					<tr>
						<td>VIP7</td>
						<td>3300</td>
						<td>VIP17</td>
						<td>16800</td>
					</tr>
					<tr>
						<td>VIP8</td>
						<td>4200</td>
						<td>VIP17</td>
						<td>18700</td>
					</tr>
					<tr>
						<td>VIP9</td>
						<td>5200</td>
						<td>VIP19</td>
						<td>20700</td>
					</tr>
					<tr>
						<td>VIP10</td>
						<td>6300</td>
						<td>VIP20</td>
						<td>22800</td>
					</tr>
				</table>
				<table class="info-table svip">
					<tr>
						<th colspan="2">VIP等级说明</th>
					</tr>
					<tr>
						<th>等级</th>
						<th>经验</th>
					</tr>
					<tr>
						<td>SVIP1</td>
						<td>25000</td>
					</tr>
					<tr>
						<td>SVIP2</td>
						<td>27300</td>
					</tr>
					<tr>
						<td>SVIP3</td>
						<td>29700</td>
					</tr>
					<tr>
						<td>SVIP4</td>
						<td>32200</td>
					</tr>
					<tr>
						<td>SVIP5</td>
						<td>34800</td>
					</tr>
					<tr>
						<td>SVIP6</td>
						<td>37500</td>
					</tr>
					<tr>
						<td>SVIP7</td>
						<td>40300</td>
					</tr>
					<tr>
						<td>SVIP8</td>
						<td>43200</td>
					</tr>
					<tr>
						<td>SVIP9</td>
						<td>46200</td>
					</tr>
					<tr>
						<td>SVIP10</td>
						<td>49300</td>
					</tr>
				</table>
			</view>
			<!-- 浮动底栏位置补偿 -->
			<view class="filler-block"></view>
			<!-- 浮动底栏位置补偿 -->
			<view class="filler-block"></view>
			<!-- 浮动底栏位置补偿 -->
			<view class="filler-block"></view>
		</view>
	</view>
</template>

<script setup>


</script>
<style>

</style>